<template>
	<view class="container">
		<!-- 会员卡二维码弹窗 -->
		<qrcodeMask ref="qrcodeMask" :content="content" title="会员码"></qrcodeMask>
		<view class="header ">
			<view class="margin">
				<image class="bg" :src="url+'/static/imgs/member-card/bg.png'"></image>
			</view>
			<view class="col header-main">
				<view class="col header-main-margin">
					<view class="row padding">
						<image :src="userInfo.avatar" mode="aspectFill" class="avatar-image"></image>
						<text>ID：{{memberInfo.id||''}}</text>
						<image :src="url+'/static/imgs/member-card/qrcode.png'" mode="aspectFill" class="qrcode auto-left" @click="changeMask"></image>
					</view>
					<view class="row merchant">
						<image class="logo" mode="aspectFill" :src="storeInfo.store_pic"></image>
						<text class="name">{{storeInfo.store_name||''}}</text>
						<text class="price" >¥{{memberInfo.available_predeposit}}</text>
					</view>
				</view>
			</view>

		</view>
		<view class="col menu">
			<view class="row item">
				<image class="icon" :src="url+'/static/imgs/member-card/coupon.png'"></image>
				<text class="name">优惠券</text>
				<view class="row auto-left right">
					<text class="number" @click="toCouponList">更多({{couponList.total||0}}) ></text>
				</view>
			</view>
			<view class="border"></view>
			<view class="coupon margin" v-for="(item,index) in couponList.coupon_list" v-bind:key="index" v-if="index<2">
				<view class="coupon-header">
					<image :src="url+'/static/imgs/coupon-bg.png'" class="bg"></image>
					<view class="row coupon-main">
						<view class="col title">
							<view class="coupon-price">
								<text>￥</text>
								<text>{{item.coupon_info.money}}</text>
							</view>
							<view class="condition">满{{item.coupon_info.need_money}}元可用</view>
						</view>
						<view class="col tips-text">
							<text>{{item.coupon_info.name}}</text>
							<text>有效期：{{item.start_time}}~{{item.end_time}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="row item">
				<image class="icon" :src="url+'/static/imgs/member-card/money.png'"></image>
				<text class="name">独家红包</text>
				<view class="row auto-left right">
					<text class="number" @click="toRedPacketList">更多({{redPacketList.total||0}}) ></text>
				</view>
			</view>
			<view class="border"></view>
			<redPacketList :listData="redPacketList.coupon_list" :max="2"></redPacketList>
			<view class="row item">
				<image class="icon" :src="url+'/static/imgs/member-card/category.png'"></image>
				<text class="name">免费餐品</text>
				<view class="row auto-left right">
					<text class="number" @click="toFreeGoodsList">更多({{freeGoodsList.total||0}}) ></text>
				</view>
			</view>
			<view class="border"></view>
			<freeGoodsList :listData="freeGoodsList.coupon_list" :max="2"></freeGoodsList>
		</view>
	</view>

</template>

<script>
	var app = getApp();
	import http from "../../../common/js/request.js";
	import common from '../../../common/js/function.js';
	import qrcodeMask from '../../../components/qrcodeMask.vue';
	import redPacketList from '../../../components/redPacketList.vue';
	import freeGoodsList from '../../../components/freeGoodsList.vue';

	export default {
		data() {
			return {
				store_id: app.globalData.storeId,
				desk_id: app.globalData.deskId,
				url: app.globalData.baseImgUrl,
				content: '',
				memberInfo: [], //会员信息
				storeInfo: [], //店铺信息
				userInfo: [], //用户信息
				couponList: [], //优惠券信息
				redPacketList: [], //独家红包信息
				freeGoodsList: [], //免费菜品信息
			}
		},
		components: {
			qrcodeMask,
			redPacketList,
			freeGoodsList
		},
		onShow() {
			var that = this;
			common.verifyAuth(() => {
				that.getMemberInfo();
				that.getStoreInfo();
				that.getUserInfo();
				that.getCouponList();
				that.getRedPacketList();
				that.getFreeGoodsList();
			}, true);
		},
		methods: {
			//获取优惠券信息
			getCouponList() {
				var that = this;
				http.post('/api/v1/store/get_member_store_coupon', {
					store_id: that.store_id
				}, res => {
					that.couponList = res.datas;
				});
			},
			//获取独家红包信息
			getRedPacketList() {
				var that = this;
				http.post('/api/v1/store/get_member_store_red', {
					store_id: that.store_id
				}, res => {
					that.redPacketList = res.datas;
				});
			},
			//获取免费菜品信息
			getFreeGoodsList() {
				var that = this;
				http.post('/api/v1/store/get_member_goods_gifts', {
					store_id: that.store_id
				}, res => {
					that.freeGoodsList = res.datas;
				});
			},
			//用户信息
			getUserInfo() {
				var that = this;
				http.post('/api/v1/member/member_info', {}, res => {
					that.userInfo = res.datas;
				});

			},
			//店铺信息
			getStoreInfo() {
				var that = this;
				http.post('/api/v1/store/store_detail', {
					store_id: that.store_id
				}, res => {
					that.storeInfo = res.datas;
				});
			},
			//店铺会员信息
			getMemberInfo() {
				var that = this;
				http.post('/api/v1/store/get_member_store_info', {
					store_id: that.store_id
				}, res => {
					that.memberInfo = res.datas;
					that.content = escape('member_id=' + that.memberInfo.member_id + '&store_id=' + that.store_id)
				});
			},
			//优惠券查看更多
			toCouponList() {
				uni.navigateTo({
					url: '/pages/store/couponList/couponList'
				});
			},
			//独家红包查看更多
			toRedPacketList() {
				uni.navigateTo({
					url: '/pages/store/redPacketList/redPacketList'
				});
			},
			//免费餐品查看更多
			toFreeGoodsList() {
				uni.navigateTo({
					url: '/pages/store/freeGoodsList/freeGoodsList'
				});
			},
			//展示会员二维码
			changeMask: function() {
				this.$refs.qrcodeMask.changeMask();
			},
			//展示免费餐品二维码
			changeFreeGoodsMask: function() {
				this.$refs.qrcodeMask.changeMask();
			},
		}
	}
</script>
<style>
	page {
		background: #F7F7F7;
	}

	.header {
		position: relative;
		width: 100%;
	}

	.header .bg {
		width: 100%;
		height: 375rpx;
		margin-top: 20rpx;
	}

	.header .padding {
		align-items: center;
		color: #fff;
		font-size: 30rpx;
		width: 100%;
		height: 100%;
	}

	.header .padding text {
		margin-left: 20rpx;
	}

	.header-main {
		position: absolute;
		top: 20rpx;
		left: 0rpx;
		align-items: center;
		width: 100%;
		justify-content: center;
	}

	.header-main-margin {
		align-items: center;
		justify-content: space-between;
		width: 600rpx;
		height: 345rpx;
		margin: 0 auto;
		padding: 0rpx 45rpx;
		/* width: 100%;
		height: 345rpx;
		margin: 0rpx 45rpx; */
		/* background: #f00; */
	}

	.avatar-image {
		width: 94rpx;
		height: 94rpx;
		border-radius: 50%;
	}

	.qrcode {
		width: 70rpx;
		height: 70rpx;
	}

	.merchant {
		position: relative;
		width: 100%;
		align-items: center;
		justify-content: space-between;
	}

	.merchant .name {
		position: absolute;
		top: -26rpx;
		left: 0;
		width: 100%;
		font-size: 42rpx;
		text-align: center;
		color: rgba(255, 255, 255, 0.37);
		font-weight: Demibold;
	}

	.merchant .logo {
		width: 155rpx;
		height: 155rpx;
		border-radius: 50%;
	}

	.merchant .price {
		font-size: 48rpx;
		color: #fff;
		font-weight: bold;
	}

	/* 底部item分组 */


	.item {
		height: 70rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 34rpx;
		margin-top: 38rpx;
	}

	.item .name {
		color: #333333;
		font-size: 32rpx;
		margin-left: 18rpx;
		font-weight: bold;
	}

	.icon {
		width: 40rpx;
		height: 38rpx;
	}

	.right {
		align-items: center;
	}

	.number {
		margin-right: 24rpx;
		color: #898887;
		font-size: 28rpx;
	}

	.border {
		height: 1rpx;
		width: 100%;
		background: #F2F2F2;
	}

	/* 优惠券 */
	.coupon-header {
		width: 100%;
		height: 202rpx;
		margin-top: 20rpx;
		position: relative;
	}

	.coupon-header .bg {
		width: 100%;
		height: 100%;
	}

	.coupon-header .coupon-main {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		height: 202rpx;
		align-items: center;
		justify-content: space-between;
	}

	.coupon-header .coupon-main .title {
		width: 220rpx;
		height: 140rpx;
		color: #fff;
		align-items: center;
		justify-content: space-between;
	}

	.coupon-header .coupon-main .title .coupon-price text:nth-child(1) {
		font-weight: Demibold;
		font-size: 50rpx;
	}

	.coupon-header .coupon-main .title .coupon-price text:nth-child(2) {
		font-weight: Demibold;
		font-size: 80rpx;
	}

	.coupon-header .coupon-main .title .condition {
		font-size: 28rpx;
	}

	.coupon-header .tips-text {
		margin-left: 32rpx;
	}

	.coupon-header .tips-text text:nth-child(1) {
		color: #333333;
		font-size: 32rpx;
	}

	.coupon-header .tips-text text:nth-child(2) {
		color: #999999;
		font-size: 28rpx;
		margin-top: 28rpx;
	}
</style>
